import React from 'react';
import BaseComponent from '../Base/BaseComponent';
import {Icon, Input, Tag, Tooltip} from 'antd';

class BrandTag extends BaseComponent {
    constructor() {
        super();
    }

    state = {
        value: [],
        inputVisible: false,
        inputValue: '',
    };

    handleClose = (removedTag) => {
        const value = this.state.value.filter(tag => tag !== removedTag);
        console.log(value);
        this.setState({value}, () => {
            const onChange = this.props.onChange;
            if (onChange) {
                onChange(this.state.value);
            }
        });
    };

    showInput = () => {
        this.setState({inputVisible: true}, () => this.input.focus());
    };

    handleInputChange = (e) => {
        this.setState({inputValue: e.target.value});
    };

    componentWillReceiveProps(nextProps) {
        this.setState({value: nextProps.value})
    }

    handleInputConfirm = () => {
        const state = this.state;
        const inputValue = state.inputValue;
        let value = state.value;
        if (inputValue && value.indexOf(inputValue) === -1) {
            value = [...value, inputValue];
        }
        console.log(value);
        this.setState({
            value,
            inputVisible: false,
            inputValue: '',
        }, () => {
            const onChange = this.props.onChange;
            if (onChange) {
                onChange(this.state.value);
            }
        });
    };

    saveInputRef = input => this.input = input;

    render() {
        const {value, inputVisible, inputValue} = this.state;
        return (
            <div>
                {value.map((tag, index) => {
                    const isLongTag = tag.length > 20;
                    const tagElem = (
                        <Tag key={tag} closable={true} afterClose={() => this.handleClose(tag)}>
                            {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                        </Tag>
                    );
                    return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
                })}
                {inputVisible && (
                    <Input
                        ref={this.saveInputRef}
                        type="text"
                        size="small"
                        style={{width: 78}}
                        value={inputValue}
                        onChange={this.handleInputChange}
                        onBlur={this.handleInputConfirm}
                        onPressEnter={this.handleInputConfirm}
                    />
                )}
                {!inputVisible && (
                    <Tag
                        onClick={this.showInput}
                        style={{background: '#fff', borderStyle: 'dashed'}}
                    >
                        <Icon type="plus"/> 点击增加
                    </Tag>
                )}
            </div>
        )
    }
}

export default BrandTag;
